<template>
  <div class="addUser">
    <!-- 添加会员 -->
    <el-dialog title="添加" :visible.sync="addMarketDialogVisible" width="40%">
      <el-form ref="form" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select class="select" v-model="form.gender" placeholder="请选择性别">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader
            class="select"
            :options="cityData"
            v-model="cityCurrent"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="推荐码">
          <el-input v-model="form.code" placeholder="请输入推荐码"></el-input>
        </el-form-item>
        <el-form-item label="登录账号">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="form.password" placeholder="请输入登录密码" maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMarketDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureAddMarket()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {ajax} from '@/api';
import {getToken} from "@/utils/auth";
import { cityData } from "@/api/cityData.js";
export default {
  name: "addUser",
  data() {
    return {
      input: "",
      cityCurrent: [],
      cityData: cityData,
      addMarketDialogVisible: false,
      genderList: [
        {
          label: "男",
          value: "male"
        },
        {
          label: "女",
          value: "female"
        }
      ],
      form: {
        targetUserId: 0,
        mobile: "",
        password: "",
        role:
          '{"admin":false,"dealer":false,"issue":false,"market":false,"user":true}',
        name: "",
        gender: "",
        areaId: "",
        code: "",
        token: getToken()
      }
    };
  },
  methods: {
    sureAddMarket() {   //添加用户
      if (this.vails() === undefined) {
        if(this.isPoneAvailable(this.form.mobile) &&  this.passwordVerification(this.form.password)){
          ajax("userEdit", this.form).then(res => {
            if (res.data.code === 200) {
              this.addMarketDialogVisible = false;
              this.form = {
                targetUserId: 0,
                mobile: "",
                password: "",
                role: "",
                name: "",
                gender: "",
                areaId: "",
                code: "",
                token: getToken()
              };
              this.$message.success('保存成功');
              setTimeout(() => {
                location.reload();
              },100);
              
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      }
    },
    openAddMarketDialogVisible(){
        this.addMarketDialogVisible = true;
    },
    //验证
    vails(){
      if(this.form.name === ''){
        return this.$message.error('请输入用户名称');
      }

      if(this.form.name === ''){
        return this.$message.error('请选择性别');
      }

      if(this.cityCurrent.length === 0){
        return this.$message.error('请输入用户地址');
      }

      if(this.form.code === ''){
        return this.$message.error('请输入推荐码');
      }
      
      if(this.form.mobile === ''){
        return this.$message.error('请输入用户联系电话');
      }
      if(this.form.password === ''){
        return this.$message.error('请输入用户登录密码');
      }
    },
    handleChange(value) {
      this.form.areaId = value[value.length-1];
      console.log(this.form);
    },

    //验证是否是正确手机号
    isPoneAvailable(number){
      let myReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myReg.test(number)) {
         this.$message.error('请输入正确格式的手机号');
         return false;
      } else {
          return true;
      }
    },
    //密码合法性
    passwordVerification(number){
      console.log(number.length < 8,number.indexOf(' ') > -1);
        if(number.length < 8 || number.indexOf(' ') > -1){
          
          this.$message.error('请输入8到20位密码（不含空格）');
          return false;
        }else{
          return true;
        }
    }
  }
};
</script>


<style lang="less" scoped>
.addUser {
}
</style>
